<template>
	<view :class="nowTheme()">
		<common-top>
			<template #name>登入</template>
		</common-top>
		<view class="login-input-box">
			<text class="register" @click="goRegister()">注册</text>
			<view class="box">
				<view class="input-box">
					<view class="input-title">phone</view>
					<view class="login-input">
						<view class="login-input-icon">
							<text class="iconfont icon-dianhua"></text>
						</view>
						<input class="login-input-context" v-model="loginDTO.phone" focus placeholder="请输入电话" />
					</view>
					
				</view>
				<view class="input-box">
					<view class="input-title">password</view>
					<view class="login-input">
						<view class="login-input-icon">
							<text class="iconfont icon-password"></text>
						</view>
						<input class="login-input-context" v-model="loginDTO.password" password type="text" placeholder="请输入密码" />
					</view>
					
				</view>
			</view>
			<button class="login-button" @click="login()">登入</button>
		</view>
		
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import { loginAPI } from '/services/user.js'
import {useUserStore} from '@/stores/userStore.js'
import {useThemeStore} from '@/stores/themeSrore.js'
import { nowTheme } from '@/utils/theme.js'
	// 用户输入的信息
	const loginDTO = reactive({
		phone:'',
		password:'',
		terminal:1
	})
	const login = async() =>{
		const res = await loginAPI(loginDTO)
		if(res.code==200){
			const userStore = useUserStore()
			await userStore.setUserInfo(res.data) //保存用户信息	
			uni.switchTab({url:'/pages/chat/chat'})
			const themeStore = useThemeStore()
			themeStore.setNeedSetTheme(true)
			setTimeout(()=>{
				uni.showToast({ icon: 'success', title: '登录成功' })
			},500)
		}
	}
	const goRegister=()=>{
		uni.navigateTo({
			url:'/pages/register/register'
		})
	}
</script>

<style scoped lang="scss">
	.login-input-box{
		display: flex;
		flex-direction: column;
		.register{
			color: skyblue;
			display: flex;
			justify-content: flex-end;
			margin-bottom: 10rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
		.box{
			display: flex;
			flex-direction: column; 
			align-items: center;
			.input-box{
				width: 80vw;
				margin-top: 20rpx;
				.input-title{
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.login-input{
					display: flex;
					height: 80rpx;
					border-radius: 10rpx;
					background-color: #eaeaea;
					align-items: center;
					.login-input-icon{
						margin-left: 10rpx;
					}
					.login-input-context{
						padding: 10rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		.login-button{
			margin-top: 90rpx;
			width: 600rpx;
			border-radius: 45rpx;
			color: white;
			background-color: #13d36a;
		}

	}
</style>
